<!-- local层镜头动画 -->
<template>
  <div
    class="attribute"
    :style="'max-height:' + ($store.state.windowAttributes.height + 300) + 'px'"
  >
    <a-form-item label="镜头动画">
      <a-radio-group
        @change="changeAnimationSwitch"
        v-model:value="viewControlConfig.status"
      >
        <a-radio :value="true">打开</a-radio>
        <a-radio :value="false">关闭</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item v-if="viewControlConfig.status">
      <template #label>
        循环动画
        <a-tooltip>
          <template #title>
            此功能用于循环‘当前生效动画’组中，开:开启动画循环播放；关:循环动画关闭!
          </template>
          <question-circle-outlined class="toolTip" />
        </a-tooltip>
      </template>
      <a-radio-group
        v-model:value="viewControlConfig.isCycle"
        @change="changeAnimationCycle"
        :disabled="!viewControlConfig.list.length"
      >
        <a-radio :value="true">打开</a-radio>
        <a-radio :value="false">关闭</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="循环间隔" v-if="viewControlConfig.isCycle">
      <a-input-number
        class="inputStyle"
        :min="1000"
        :step="500"
        v-model:value="viewControlConfig.interval"
      />
    </a-form-item>
    <a-collapse
      v-model:activeKey="activeAnimationKey"
      expand-icon-position="right"
    >
      <a-collapse-panel
        key="lensAnimation"
        header="镜头动画"
        :collapsible="viewControlConfig.status ? '' : 'disabled'"
      >
        <template v-if="viewControlConfig.status">
          <a-form-item label="示例动画">
            <a-select
              v-model:value="exampleAnimation"
              class="inputStyle"
              :options="exampleAnimationOptions"
              @change="selectExampleAnimation"
            />
          </a-form-item>
          <a-form-item label="动画名称">
            <a-input
              class="inputStyle"
              allowClear
              :placeholder="
                lensAnimation.name ? lensAnimation.name : '请输入动画名称'
              "
              v-model:value="lensAnimation.name"
            />
          </a-form-item>
          <a-collapse
            v-model:activeKey="animationName"
            accordion
            expand-icon-position="right"
          >
            <a-collapse-panel
              v-for="(animationItem, key) in lensAnimation.labelItem"
              :key="key"
              :header="labelDict[key] + '动画'"
              :showArrow="false"
            >
              <template #extra>
                <thunderbolt-filled
                  v-if="animationName == key"
                  style="color: #177ddc"
                />
                <thunderbolt-outlined v-else style="color: #177ddc" />
              </template>
              <!--动画配置-->
              <animation-config
                :configItem="animationItem"
                :labelName="labelDict[key]"
                :labelKey="key"
              />
            </a-collapse-panel>
            <div class="animationBtn">
              <div>
                <a-button
                  ghost
                  type="primary"
                  size="small"
                  @click="previewTestAnimation"
                >
                  预览
                </a-button>
              </div>
              <div>
                <a-button
                  type="primary"
                  size="small"
                  @click="addAnimationToAct"
                >
                  添加
                </a-button>
              </div>
            </div>
            <!--当前生效动画-->
            <a-collapse-panel key="activeAnimation" header="当前生效动画">
              <div class="draggableDiv">
                <template v-if="viewControlConfig.list.length">
                  <draggable
                    :list="viewControlConfig.list"
                    ghost-class="dragGhost"
                    :force-fallback="true"
                    drag-class="dragGhost"
                    item-key="key"
                    animation="300"
                  >
                    <template #item="{ index }">
                      <div v-if="viewControlConfig.activeAnimation == index">
                        <dv-border-box8 :dur="5">
                          <div dv-bg class="animationItem">
                            {{ viewControlConfig.list[index].pitch.name }}
                          </div>
                        </dv-border-box8>
                      </div>
                      <div v-else>
                        <div class="animationItem animationDiv">
                          <div class="left">
                            {{ viewControlConfig.list[index].pitch.name }}
                          </div>
                          <div
                            class="right"
                            @click="viewControlConfig.list.splice(index, 1)"
                          >
                            <minus-circle-outlined
                              style="color: red; fontsize: 20px"
                            />
                          </div>
                        </div>
                      </div>
                    </template>
                  </draggable>
                </template>
                <template v-else>
                  <a-empty :image="emptyImg" description="当前暂无生效动画" />
                </template>
              </div>
            </a-collapse-panel>
          </a-collapse>
        </template>
        <template v-else>
          <a-empty
            :image="emptyImg"
            description="镜头动画已关闭,如需要请打开动画配置"
          />
        </template>
      </a-collapse-panel>

      <a-collapse-panel key="trackAnimation" header="轨迹动画">
        <a-empty description="暂无轨迹动画(待开发)" />
      </a-collapse-panel>
    </a-collapse>
    <div class="animationBtn">
      <div>
        <a-button
          ghost
          type="primary"
          @click="addMapAnimation"
          :disabled="!viewControlConfig.list.length"
        >
          预览
        </a-button>
      </div>
      <div>
        <a-button type="primary" @click="animationControl(animationType)">
          {{ animationType ? '播放' : '暂停' }}
        </a-button>
      </div>
      <div>
        <a-button type="primary" danger @click="clearAllAnimation(true)">
          清除
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  ThunderboltOutlined,
  ThunderboltFilled,
  MinusCircleOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import draggable from 'vuedraggable';
import animationConfig from './animationConfig/animationConfig.vue';
export default {
  props: ['viewControlConfig'],
  inject: ['getLocaRef'],
  data() {
    return {
      animationType: true, //动画控制true:播放状态 false:暂停状态
      emptyImg:
        'https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original',
      activeAnimationKey: 'lensAnimation',
      animationName: 'activeAnimation',
      labelDict: {
        // center: '中心',
        pitch: '俯仰',
        zoom: '缩放',
        rotation: '旋转',
      },
      exampleAnimation: 0, //示例动画
      exampleAnimationOptions: [
        {
          value: 0,
          label: '无',
        },
        {
          value: 1,
          label: '下降动画',
        },
        {
          value: 2,
          label: '环绕动画',
        },
        {
          value: 3,
          label: '上升动画',
        },
      ],
      exampleAnimationArr: [
        {
          pitch: {
            value: 1,
            control: '0,20;1,0',
            timing: '0,0,0.8,1',
            duration: 3000,
          },
          zoom: {
            value: 15.9,
            control: '0,12.8;1,15.9',
            timing: '0,0,0.8,1',
            duration: 3000,
          },
          rotation: {
            value: 20,
            control: '0,-20;1,20',
            timing: '0,0,0.8,1',
            duration: 2000,
          },
        },
        {
          pitch: {
            value: 100,
            control: '0,20;0.5,50;1,100',
            timing: '0.3,0,1,1',
            duration: 7000,
          },
          rotation: {
            value: 180 * 2,
            control: '0.4,5.7;0.6,360',
            timing: '0,0,0.7,1',
            duration: 10000,
          },
          zoom: {
            value: 18,
            control: '0.3,16;1,17',
            timing: '0.3,0,0.9,1',
            duration: 5000,
          },
        },
        {
          pitch: {
            name: '上升动画',
            value: 1,
            control: '0,0;1,100',
            timing: '0.1, 0, 0.7, 1',
            duration: 2000,
          },
          rotation: {
            value: -180 * 2,
            control: '0.6, -400;1, -450',
            timing: '0.3, 0, 0.7, 1',
            duration: 2000,
          },
          zoom: {
            value: 13.8,
            control: '0, 17.5;1, 13.8',
            timing: '0.3, 0, 0.7, 1',
            duration: 2500,
          },
        },
      ],
      //当前编辑动画
      lensAnimation: {
        name: '', //名称
        labelItem: {
          pitch: {},
          zoom: {},
          rotation: {},
        },
      },
    };
  },
  computed: {
    locaRef() {
      return this.getLocaRef();
    },
  },
  methods: {
    //示例动画
    selectExampleAnimation(value, option) {
      this.lensAnimation.name = option.label;
      if (value) {
        for (let key in this.exampleAnimationArr[value - 1]) {
          this.lensAnimation.labelItem[key] =
            this.exampleAnimationArr[value - 1][key];
        }
        this.previewTestAnimation(true);
        this.animationName = 'pitch';
      }
    },
    /**
     * 预览测试动画
     * @param {*} preview 是否预览
     */
    previewTestAnimation(preview = true) {
      let lensAnimation = this.lensAnimation;
      let animationItem = {
        name: lensAnimation.name || `动画${viewControlConfig.list.length}`,
        animation: {},
      };
      for (let key in lensAnimation.labelItem) {
        if (JSON.stringify(lensAnimation.labelItem[key]) != '{}') {
          animationItem.animation[key] = {};
          key == 'pitch'
            ? (animationItem.animation[key].name = lensAnimation.name)
            : '';
          //值
          lensAnimation.labelItem[key].value
            ? (animationItem.animation[key]['value'] =
                lensAnimation.labelItem[key].value)
            : '';
          //动画时间
          lensAnimation.labelItem[key].duration
            ? (animationItem.animation[key]['duration'] =
                lensAnimation.labelItem[key].duration)
            : '';
          //控制器
          if (lensAnimation.labelItem[key]['control']) {
            const arr = lensAnimation.labelItem[key].control
              .split(';')
              .toString()
              .split(',');
            let controlArr = [];
            for (let i = 0; i < arr.length; i++) {
              controlArr.push([arr[i], arr[i + 1]]);
              ++i;
            }
            animationItem.animation[key]['control'] = controlArr;
          }
          //线性过渡
          lensAnimation.labelItem[key].timing
            ? (animationItem.animation[key]['timing'] =
                lensAnimation.labelItem[key]['timing'].split(','))
            : '';
        }
      }
      preview
        ? this.locaRef.viewControl.addAnimates([animationItem.animation])
        : '';
      return animationItem;
    },
    //追加动画
    addAnimationToAct() {
      this.animationName = 'activeAnimation';
      this.viewControlConfig.list.push(
        this.previewTestAnimation(false).animation
      );
    },
    //动画控制
    animationControl(status) {
      status
        ? this.locaRef.viewControl.resumeAnimate()
        : this.locaRef.viewControl.pauseAnimate();
      this.animationType = !this.animationType;
    },
    /**
     * 清除所有动画
     * @param {*} init 是否初始化
     */
    clearAllAnimation(init = false) {
      this.locaRef.viewControl.clearAnimates();
      if (init) {
        this.viewControlConfig.list = [];
        this.viewControlConfig.activeAnimation = -1;
      }
    },
    //动画开关
    changeAnimationSwitch(val) {
      const status = val.target.value;
      status ? this.animationControl(true) : this.clearAllAnimation();
    },
    /**
     * 增加Map动画
     */
    addMapAnimation() {
      return new Promise((resolve) => {
        this.clearAllAnimation();
        const viewControlConfig = this.viewControlConfig;
        if (viewControlConfig.list.length) {
          var index = 0; //当前运行动画索引
          //初始化
          viewControlConfig.activeAnimation = index;
          this.animationType = false;
          const addFun = (index) => {
            if (index < viewControlConfig.list.length) {
              //增加动画顺序
              this.locaRef.viewControl.addAnimates(
                [viewControlConfig.list[index]],
                () => {
                  index++;
                  viewControlConfig.activeAnimation = index;
                  addFun(index);
                }
              );
            } else {
              message.success('动画播放结束了哦~');
              this.animationType = true;
              resolve(true);
            }
          };
          addFun(index);
        }
      });
    },
    /**
     * 改变循环动画
     * @param {*} e
     */
    changeAnimationCycle(e) {
      const status = e.target.value;
      this.clearAllAnimation();
      if (status) {
        this.animationCycleStatus(status);
      } else {
        this.animationType = true;
        this.viewControlConfig.activeAnimation = -1;
      }
    },
    /**
     * 改变前动画组循环状态
     * @param {*} status 是否循环
     */
    animationCycleStatus(status) {
      setTimeout(() => {
        this.addMapAnimation().then(() => {
          status ? this.animationCycleStatus(status) : '';
        });
      }, this.viewControlConfig.interval);
    },
  },
  components: {
    animationConfig,
    ThunderboltOutlined,
    ThunderboltFilled,
    draggable,
    MinusCircleOutlined,
    QuestionCircleOutlined,
  },
};
</script>
<style lang="less" scoped>
.attribute {
  .inputStyle {
    width: 160px;
  }
  .toolTip {
    color: #e6a23c;
  }
  .animationBtn {
    text-align: center;
    display: flex;
    padding: 10px;
    div {
      flex: 1;
    }
  }
  .draggableDiv {
    max-height: 260px;
    overflow: auto;
    .animationItem {
      padding: 10px;
      margin: 5px;
    }
    .animationDiv {
      border: 1px solid #d9d9d9;
      margin: 5px;
      display: flex;
      .left {
        flex: 0.8;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .right {
        flex: 0.2;
        text-align: center;
      }
      .right:hover {
        cursor: pointer;
      }
    }
    .dragGhost {
      background-color: #d9d9d9 !important;
    }
  }
  .draggableDiv:hover {
    cursor: move;
  }
}
</style>
